import Vue from 'vue'
import Vuex from 'vuex'

import {
    INCREMENT,
    AUPDATEINFO
} from './mutations-types'

// 1.安装插件
Vue.use(Vuex)

const moduleA = {
    state: {
        times: new Date(),
        name: "wayne"
    },
    mutations: {
        updateName(state, payload) {
            // state.name = 'kobe'
            state.name = payload.name
        }
    },
    actions: {
        aUpdateName(content){
            console.log(content)
            // content包含dispath，commit，getters，state，rootGetters，rootState
            // 也可以用 对象的解构 的方式写 content
            setTimeout(()=>{
                content.commit({
                    type: 'updateName',
                    name: 'HanMeimei'
                })
            },2000)
        }
    },
    getters: {
        fullName(state) {
            return state.name + ' fullName'
        },
        fullName2(state, getters) {
            return getters.fullName + " 123"
        },
        fullName3(state, getters, rootState) {
            // rootState可以拿到根store的state数据
            return getters.fullName + " 123" + rootState.counter
        }
    }
}

// 2.创建对象
const store = new Vuex.Store({
    state: {
        // 存放数据
        counter: 1000,
        students: [{
                id: 1000,
                name: 'wayne',
                age: 18
            },
            {
                id: 1001,
                name: 'kobe',
                age: 24
            },
            {
                id: 1002,
                name: 'james',
                age: 15
            },
            {
                id: 1003,
                name: 'curry',
                age: 10
            }
        ],
        info: {
            name: 'kobe',
            age: 40,
            height: 1.98
        }
    },
    mutations: {
        // 每一个mutations方法都可以看成是两部分：事件类型和负载
        // 存放方法
        [INCREMENT](state) {
            state.counter++;
        },
        decrement(state) {
            state.counter--;
        },
        // incrementCount(state,count){
        //     // 参数被称为是mutation的载荷（Payload）
        //     // 1. 普通提交风格接收方式
        //     state.counter += count
        // },
        incrementCount(state, payload) {
            // 参数被称为是mutation的载荷（Payload）
            // 2. 带有type属性对象的提交方式
            console.log(payload)
            state.counter += payload.count
        },
        incrementStu(state, stu) {
            state.students.push(stu)
        },
        updateInfo(state, payload) {
            // delete state.info.age

            // 试验可知，代码中只要有一行代码能触发响应式，不规范的添加删除数据方式也能被监听，与存放位置无关
            state.info.name = 'wayne'
            // state.info.name = payload.name
            // 不能响应式更新
            // state.info.address = '洛杉矶'
            // 响应式更新
            // Vue.set(state.info, 'address', '洛杉矶')
            // 不能响应式更新
            // delete state.info.age
            // 响应式删除数据
            // Vue.delete(state.info, 'age')

            // 模仿数据请求，修改页面但是无法监听数据已经改变：mutations只能进行同步操作
            // setTimeout(()=>{
            //     state.info.name = 'wayne'
            // },2000)
        }
    },
    actions: {
        // content: 上下文，相当于store
        // [AUPDATEINFO](content, payload) {
        //     setTimeout(() => {
        //         // 修改数据一定要在mutations里面操作，页面有修改却无法监听
        //         // content.state.info.name = 'wayne'

        //         // 调用mutations来改变数据
        //         // content.commit('updateInfo')

        //         // 当要传入参数的时候
        //         content.commit({
        //             type: 'updateInfo',
        //             name: payload.name
        //         })

        //         // 返回修改成功的消息，有更加简洁的书写
        //         payload.success && payload.success()
        //     }, 2000)
        // },

        [AUPDATEINFO](content, payload) {
            console.log(content)
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    content.commit({
                        type: 'updateInfo',
                        name: payload.name
                    })
                    resolve("修改成功，我的妈呀！")
                }, 2000)
            })
        }
    },
    getters: {
        // 相当于vue的计算属性
        // powerCounter(state) {
        //     // 做平方
        //     return state.counter * state.counter;
        // },
        powerCounter(state) {
            // 做平方
            return state.counter * state.counter;
        },
        more18stu(state) {
            return state.students.filter(s => s.age >= 18)
        },
        more20stuLength(state, getters) {
            return getters.more18stu.length;
        },
        // moreAgeStu(state) {
        //     // return function (age) {
        //     //     return state.students.filter(s => s.age >= age);
        //     // }
        //     return age => state.students.filter(s => s.age >= age);
        // }
        moreAgeStu: state => age => state.students.filter(s => s.age >= age),
        // moreAgeStuLength(state) {
        //     // return function (age) {
        //     //     return state.students.filter(s => s.age >= age).length
        //     // }
        //     return age => state.students.filter(s => s.age >= age).length;
        // }
        moreAgeStuLength: state => age => state.students.filter(s => s.age >= age).length,
    },
    // 模块化store，解决臃肿
    modules: {
        // 模块会放到state中去
        moduleA
    }
})

// 3.导出store独享
export default store